<template>
    <div class="login-background">
        <img class="bg-img" src="../statics/images/pc_tp.png">
        <div class="login-box">
            <mu-card>
                <mu-text-field icon="face" label="请输入账号" v-model="username" labelFloat/>
                <mu-text-field icon="lock" label="请输入密码" type="password" v-model="password" labelFloat/>
                <mu-card-actions>
                    <mu-raised-button label="登入" :disabled="!buttonActive" @click="login" primary/>
                </mu-card-actions>
            </mu-card>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                clientHeight: document.body.scrollHeight,
                username: localStorage.account,
                password: '',
            }
        },
        computed: {
            buttonActive(){
                return (this.username != "" && this.password != "");
            }
        },
        methods: {
            login(){//登录
                var self = this;
                self.$http.post('/auth', {
                    username: this.username,
                    password: this.password
                }).then(function (response) {
                    var rData = response.data.data;
                    rData.expired_at = (new Date()).valueOf() + rData.ttl * 60 * 1000;//有效时间转换成客户端的有效时间
                    self.$bus.emit('USER_LOGIN', rData);
                });
            }
        }
    }
</script>
<style scoped>
    .login-background {
        position: absolute !important;
        height:100%;
        width:100%;
    }
    .mu-card {
        padding: 10px 0;
    }

    .mu-card-actions {
        text-align: center;
    }

    .login-background {
        width: 100%;
        padding: 100px 10px 300px;
        background: #7e57c2;
        position: relative;
    }

    .login-box {
        margin: 0px auto;
        width: 300px;
    }

    .bg-img {
        position: absolute;
        bottom: 0;
        left: 26%;
    }

    @media (max-width: 922px) {
        .bg-img {
            width: 100%;
        }

        .bg-img {
            left: auto;
        }
    }
</style>